<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> -->
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Cytoscape Web example</title>

    <script src="js/jquery-3.2.1.js"></script>
    <script src="js/min/json2.min.js"></script>
    <script src="js/min/AC_OETags.min.js"></script>
    <script src="js/min/cytoscapeweb.min.js"></script>
    <script src="js/min2/BlobBuilder.js"></script>

    <script type="text/javascript">
        window.onload = function() {
            // id of Cytoscape Web container div
            var div_id = "cytoscapeweb";

            // NOTE: - the attributes on nodes and edges
            //       - it also has directed edges, which will automatically display edge arrows

            $.ajax({
                type: "GET",
                url: "graphAction.action?",
                data: {
                    id1: id1,
                    id2: id2
                },
                success: function(data) {
                    // var genelist = JSON.parse(data); 
                    addNodes(data.list1);
                    addNodes(data.list2);
                    addEdges("n1", data.list1);
                    addEdges("n2", data.list2);
                }
            });

            // visual style we will use
            var visual_style = {
                nodes: {
                    shape: {
                        discreteMapper: {
                            attrName: "weight",
                            entries: [{
                                attrValue: "parent",
                                value: "RECTANGLE"
                            }]
                        }
                    },
                    color: {
                        discreteMapper: {
                            attrName: "weight",
                            entries: [{
                                attrValue: "parent",
                                value: "#D74E7C"
                            }, {
                                attrValue: "Gene",
                                value: "#FFFFFF"
                            }]
                        }
                    },
                    opacity: {
                        discreteMapper: {
                            attrName: "weight",
                            entries: [{
                                attrValue: "parent",
                                value: 1
                            }, {
                                attrValue: "Gene",
                                value: 1
                            }]
                        }
                    },
                    borderWidth: 1,
                    labelHorizontalAnchor: "bottom"
                },
                edges: {
                    width: 3
                }
            };

            // initialization options
            var options = {
                swfPath: "swf/CytoscapeWeb",
                flashInstallerPath: "swf/playerProductInstall"
            };

            var vis = new org.cytoscapeweb.Visualization(div_id, options);

            var layoutname = ["ForceDirected", "Circle", "Radial", "Tree"];
            var idlayoutname = 0;
            var draw_options = {
                // your data goes here
                // network: xml,
                network: networ_json,

                // show edge labels too
                // edgeLabelsVisible: true,

                // let's try another layout
                // layout: "ForceDirected",
                layout: layoutname[0],

                // set the style at initialisation
                visualStyle: visual_style,

                // hide pan zoom
                panZoomControlVisible: true
            };

            vis.ready(function() {
                // set the style programmatically
                document.getElementById("layout").onclick = function() {
                    idlayoutname = (idlayoutname + 1) % 4;
                    var layoutS = document.getElementById("layoutSelect");
                    layoutS.options[idlayoutname].selected = true;
                    vis.layout(layoutname[(idlayoutname)]);
                };

                document.getElementById("layoutSelect").onchange = function() {
                    var layoutS = document.getElementById("layoutSelect");
                    idlayoutname = parseInt(layoutS.options[layoutS.selectedIndex].value);
                    vis.layout(layoutname[(idlayoutname)]);

                };

                vis.addListener("click", "nodes", function(event) {
                    handle_click(event);
                }).addListener("click", "edges", function(event) {
                    handle_click(event);
                });

                function handle_click(event) {
                    var target = event.target;
                    clear();
                    for (var i in target.data) {
                        var variable_name = i;
                        var variable_value = target.data[i];
                        if ((variable_name == "label" || variable_name == "weight") && variable_value != "parent")
                            if (colormapping(variable_value) == "")
                                print(variable_value);
                            else {
                                print("<font color=" + colormapping(variable_value) + ">" + variable_value + "</font>");
                            }
                    }
                }

                function colormapping(color) {
                    if (color == "Disease") {
                        return "#D74E7C";
                    } else if (color == "Gene") {
                        return "#7495C0";
                    } else {
                        return "";
                    }
                }
            });

            vis.draw(draw_options);
        };

        // 
        function addNodes(list) {
            for (var geneid of list) {
                var node = new diyNode(geneid, geneid, "Gene");
                networ_json.data.nodes.push(node);
            }
        }

        function addEdges(nodeid, list) {
            if (Array.isArray(list))
                for (var geneid of list) {
                    var line = new diyLine(geneid, geneid, nodeid, geneid);
                    networ_json.data.edges.push(line);
                }
            else {
                alert(nodeid + " is not a array");
            }
        }

        function diyNode(id, label, weight) {
            this.id = id;
            this.label = label;
            this.weight = weight;
        }

        function diyLine(id, label, source, target) {
            this.id = id;
            this.label = label;
            this.source = source;
            this.target = target;
        }

        function getQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }
        // var id1 = "GO:0016321";
        // var id2 = "GO:0030970";
        var id1 = getQueryString("id1");
        var id2 = getQueryString("id2");

        var networ_json = {
            dataSchema: {
                nodes: [{
                    name: "label",
                    type: "string"
                }, {
                    name: "score",
                    type: "number"
                }, {
                    name: "weight",
                    type: "string"
                }],

                edges: [{
                    name: "label",
                    type: "string"
                }, {
                    name: "weight",
                    type: "number"
                }, {
                    name: "directed",
                    type: "boolean",
                    defValue: true
                }]
            },

            data: {
                nodes: [{
                    id: "n1",
                    label: id1,
                    weight: "parent"
                        // score: 1.0
                }, {
                    id: "n2",
                    label: id2,
                    weight: "parent"
                        // score: 2.2
                }],

                edges: []
            }
        };
    </script>

    <style>
        /* The Cytoscape Web container must have its dimensions set. */
        
        #cytoscapeweb {
            width: 100%;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="cytoscapeweb">
        Cytoscape Web will replace the contents of this div with your graph.
    </div>
    <div id="note">
        <span class="link" id="color">Color me surprised</span>
    </div>
</body>

</html>